<template>
  <el-card class="box-card" style="margin: 50px 0px">

    <template #header>
      <div class="card-header">
        <span>年度成本</span>
      </div>
       <!-- 头部右侧内容 -->
      <!-- <div class="right">
        <span @click="setDay">今日</span><span @click="setWeek">本周</span>
        <span @click="setMonth">本月</span><span @click="setYear">本年</span>
        <el-date-picker
          v-model="date"
          class="date"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div> -->
    </template>
    <div class="charts" ref="charts"></div>
  </el-card>
</template>

<script setup lang="js">
import { ref, onMounted, onUnmounted } from "vue";

const { proxy } = getCurrentInstance();
const props = defineProps(['data'])


const XdataList = ref()
//成本，产值，利润数组
const outputList=ref([])
const costList = ref([])
const profitList =ref([])

watch(props, (newProps) => {
  XdataList.value = newProps.data.months12InCome.map(item => item.ny);
  outputList.value =newProps.data.months12InCome.map(item=>item.outPut)
  costList.value =newProps.data.months12InCome.map(item=>item.cost)
  profitList.value =newProps.data.months12InCome.map(item=>item.profit)
  setData()
}), { immediate: true }

const echarts = proxy.echarts
const RankCharts = ref()

onMounted(() => {
  //初始化echarts实例
  RankCharts.value = markRaw(echarts.init(proxy.$refs['charts']));
   // 只要窗口大小发生像素变化就会触发
   window.addEventListener("resize", () => {
    RankCharts.value.resize(); // 窗口发生改变就更新echarts
  });
})


const setData=()=>{
   //配置数据
   RankCharts.value.setOption({
    tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: XdataList.value
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '产值',
      type: 'bar',
      emphasis: {
        focus: 'series'
      },
      data:outputList.value
    },
    {
      name: '成本',
      type: 'bar',
      emphasis: {
        focus: 'series'
      },
      data: costList.value
    },
    {
      name: '利润',
      type: 'bar',
      data: profitList.value,
      emphasis: {
        focus: 'series'
      },
      markLine: {
        lineStyle: {
          type: 'dashed'
        },
        data: [[{ type: 'min' }, { type: 'max' }]]
      }
    }
  ]
  });
}


//     //本天
//     setDay() {
//       const day = dayjs().format("YYYY-MM-DD");
//       this.date = [day, day];
//     }
//     //本周
//     setWeek() {
//       const start = dayjs().day(1).format("YYYY-MM-DD");
//       const end = dayjs().day(7).format("YYYY-MM-DD");
//       this.date = [start, end];
//     }
//     //本月
//     setMonth() {
//       const start = dayjs().startOf("month").format("YYYY-MM-DD");
//       const end = dayjs().endOf("month").format("YYYY-MM-DD");
//       this.date = [start, end];
//     }
//     //本年
//     setYear() {
//       const start = dayjs().startOf("year").format("YYYY-MM-DD");
//       const end = dayjs().endOf("year").format("YYYY-MM-DD");
//       this.date = [start, end];
//     }
onUnmounted(() => {
  // 卸载echarts实例
  RankCharts.value.dispose();
  window.removeEventListener("resize", RankCharts.value);
});
</script>

<style scoped>


.right {
  position: absolute;
  right: 0px;
}

.date {
  width: 250px;
  margin: 0px 20px;
}

.right span {
  margin: 0px 10px;
}

.charts {
  width: 100%;
  height: 300px;
}

ul {
  list-style: none;
  width: 100%;
  height: 300px;
  padding: 0px;
}

ul li {
  height: 8%;
  margin: 10px 0px;
}

.rindex {
  float: left;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: black;
  color: white;
  text-align: center;
}

.rvalue {
  float: right;
}
</style>
